<template>
	<uni-popup ref="popup" type="bottom" @touchmove.stop.prevent="moveHandle">
		<view class="popup-layout">
			<view class="title-layout">
				<view class="cancel" @click="closeClick">取消</view>
				<view class="title">选择日期</view>
				<view class="sure" @click="confirmClick">确定</view>
			</view>
			<picker-view indicator-class="indicator-date" :value="value" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in days" :key="index">{{formatTimsInfo(item)}}日</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in hours" :key="index">{{formatTimsInfo(item)}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in minutes" :key="index">{{formatTimsInfo(item)}}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: 'custom-select-time',
		computed: {
			formatTimsInfo(){
				return (val) => {
					if(val < 10){
						return '0' + val
					}else{
						return val
					}
				}
			}
		},
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			const hour = date.getHours()
			const hours = []
			const minute = date.getMinutes()
			const minutes = []
			const second = date.getSeconds()
			const seconds = []
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 23; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				hours.push(i)
			}
			for (let i = 1; i <= 60; i++) {
				minutes.push(i)
				seconds.push(i)
			}
			return {
				years,
				year,
				months,
				month,
				days,
				day,
				hours,
				hour,
				minutes,
				minute,
				seconds,
				second,
				value: [9999, month - 1, day - 1],
				selectTime: '',
			}
		},
		mounted() {
			let newDay = this.formatTimsInfo(this.day)
			let newHour = this.formatTimsInfo(this.hour)
			let newMinute = this.formatTimsInfo(this.minute)
			let newSecond = this.formatTimsInfo(this.second)
			let times = this.year + '-' + this.month + '-' + newDay + ' ' + newHour + ":" + newMinute + ':' + newSecond
			this.selectTime = times
		},
		///deep/生效
		options: { 
			styleIsolation: 'shared' ,
		},
		methods: {
			//时间选择
			bindChange(e){
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				
				this.day = this.days[val[2]]
				this.hour = this.hours[val[3]]
				this.minute = this.minutes[val[4]]
				this.second = this.seconds[val[5]]
				let newDay = this.formatTimsInfo(this.day)
				let newHour = this.formatTimsInfo(this.hour)
				let newMinute = this.formatTimsInfo(this.minute)
				let newSecond = this.formatTimsInfo(this.second)
				let tiems = this.year + '-' + this.month + '-' + newDay + ' ' + newHour + ":" + newMinute
				this.selectTime = tiems
			},
			
			//显示弹窗
			show(){
				this.$refs.popup.open()
			},
			
			//关闭
			closeClick(){
				this.$refs.popup.close()
			},
			
			confirmClick(){
				if(!this.selectTime){
					uni.showToast({
						title: '请选择时间'
					})
					return
				}
				this.closeClick()
				this.$emit('selectTime',{selectTime: this.selectTime})
			}
		}
	}
</script>

<style scoped>
	/deep/ .uni-popup__wrapper {
	    width: 100% !important;
	}
	.popup-layout{
		width: 100%;
		height: 600rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
	}
	.title-layout{
		width: 100%;
		height: 100rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 32rpx;
	}
	.title{
		color: #2D323B;
		font-weight: bold;
		text-align: center;
		flex: 1;
	}
	.cancel{
		padding: 0 48rpx;
		box-sizing: border-box;
		color: #8391AC;
	}
	.sure{
		padding: 0 48rpx;
		box-sizing: border-box;
		color: #336DEE;
	}
	
	/deep/.indicator-date{
		height: 100rpx;
		color: #336DEE;
		font-size: 32rpxrpx;
	}
	.picker-view {
		width: 100%;
		flex: 1;
	}
	.item {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
	}
</style>
